// @ts-ignore
import styled from "styled-components";
type propsType={
  $size?:Number,
  $color?:String,
  $backgroundImage?:String,
};
const RankingListStyle=styled.div<propsType>`
  position: relative;
  min-width: 225px;
  max-width: 100vw;
  width: ${(props:propsType)=>props.$size?`calc(${props.$size}px)`:"225px"};;
  padding: 0 0 40px;
  margin: 0 10px 10px;
  background-image: url(${(props:propsType)=>props.$backgroundImage?props.$backgroundImage:"https://y.qq.com/ryqq/static/media/bg_index_top.5314c494.jpg?max_age=2592000"});
  background-position: left;
  background-size: auto 100%;
  transition: all 400ms;
  color: ${(props:propsType)=>props.$color?props.$color:"#000000"};
  overflow: hidden;
  &:hover .ranking-list-hover{
    opacity: 1;
  }
  &:hover .ranking-list-unhover{
    opacity: 0;
  }
  .submit-title{
    text-align: center;
    margin: 40px auto 0;
  }
  .title{
    text-align: center;
    margin: 20px auto;
  }
  .ranking-list-unhover{
    opacity: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;
    text-align: center;
    transition: opacity 400ms;
  }
  .ranking-list-hover{
    opacity: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;
    text-align: center;
    transition: opacity 400ms;
    cursor: pointer;
  }
  .ranking-list-hover:hover{
    color: var(--theme-color);
  }
  .ranking-list-box{
    display: flex;
    margin: 70px 35px 30px;
    flex-direction: column;
  }
  .ranking-list-box li{
    width: 100%;
    margin:20px auto;
    font-size: 14px;
   
  }
  .music-name{
    margin: 5px 0;
    padding: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: bolder;
    cursor: pointer;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
  }
  .music-name:hover{
    color: var(--theme-color);
  }
  .music-sing{
    cursor: pointer;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    overflow: hidden;
  }
  .music-sing:hover{
    color: var(--theme-color);
  }
`;
export default RankingListStyle;
